<template>
  <div class="md-con">
    <div :contenteditable="contenteditable" v-html="compiledMarkdown($attrs.content)"></div>
  </div>
</template>

<script>
import MarkdownIt from "markdown-it";
import "highlight.js/styles/atom-one-dark.css";
import hljs from "highlight.js";
export default {
  name: "mdRender",
  props: {
    contenteditable: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {};
  },
  mounted() {
    let copy = document.getElementById("copy");
    console.log("[ copy ] >", copy);
    copy.addEventListener("click", (e) => {
      console.log("[ e ] >", e);
      let { textContent } = e.target.attributes["attrs-data"];
      this.utils.handleClipboard(e, textContent);
    });
  },
  methods: {
    compiledMarkdown(text) {
      //@markdown-it  https://markdown-it.docschina.org/#%E5%AE%89%E8%A3%85
      const markdown = new MarkdownIt({
        html: true, //在源码中启用 HTML 标签
        linkify: true, //将类似 URL 的文本自动转换为链接。
        typographer: true, //启用一些语言中立的替换 + 引号美化
        breaks: true, //转换段落里的 '\n' 到 <br>。
        langPrefix: "language-",
        highlight: function (str, lang) {
          // console.log("str", str);
          // console.log("lang", lang);
          //给代码块设置高亮
          if (lang && hljs.getLanguage(lang)) {
            try {
              return `<pre class="hljs">
                        <code>${hljs.highlightAuto(str).value} </code>    
                        <i attrs-data='${str}' id='copy' class="el-icon-copy-document"></i>                    
                      </pre>`;
            } catch (__) {}
          }
          return '<pre class="hljs"><code>' + markdown.utils.escapeHtml(str) + "</code></pre>";
        },
      });
      let htmlString = markdown.render(text);
      return htmlString;
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .hljs {
  margin: 10px 0;
  padding: 10px;
  border-radius: 4px;
  white-space: pre-wrap;
  position: relative;
}
::v-deep .el-icon-copy-document {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 20px;
  cursor: pointer;
}
/* 引用块的样式 */
::v-deep blockquote {
  display: block;
  padding-left: 16px;
  padding-right: 16px;
  margin: 0 0 24px;
  border-left: 6px solid #dddfe4;
  background-color: #eef0f4;
  overflow: auto;
  word-break: normal;
  padding-top: 10px;
}
.md-con {
  line-height: 1.6;
  color: #1f2733;
  background: var(--answerBg);
  // background: #fafafa;
  letter-spacing: 1px;
  width: 100%;
  position: relative;
  overflow-x: auto;
  // font-family: NotoSans;
  ::v-deep p {
    margin-bottom: 10px;
    img {
      max-width: 100%;
    }
  }
  ::v-deep h3 {
    margin-bottom: 12px;
  }
  ::v-deep hr {
    border-color: #eeeeee !important;
    margin-bottom: 12px;
  }
  ::v-deep h4 {
    margin-bottom: 12px;
  }
  ::v-deep ol {
    margin: 10px;
    padding-left: 20px;
    li {
      list-style: auto;
    }
    li::marker {
      font-weight: bold; /* 设置序号加粗 */
    }
  }
  ::v-deep li {
    font-size: 14px;
    line-height: 19px;
    margin-bottom: 8px;
  }
  ::v-deep ul {
    margin: 10px 0 16px;
    padding-left: 28px;
    li {
      // list-style-type: decimal;
    }
    li::marker {
      font-weight: bold; /* 设置序号加粗 */
    }
  }
  ::v-deep ol {
    ul {
      padding-left: 15px;
      li {
        list-style-type: disc !important;
      }
    }
  }
  ::v-deep ul {
    ul {
      padding-left: 15px;
      li {
        list-style-type: disc !important; // 序号为圆点
      }
    }
  }
  ::v-deep a {
    color: rgb(64, 158, 255);
  }
  .element {
    -ms-overflow-style: none; /* IE 和 Edge */
    scrollbar-width: none; /* Firefox */
  }
  ::v-deep pre {
    overflow-x: auto;
    margin-bottom: 12px;
  }
  ::v-deep textarea {
    width: 100%;
  }
  ::v-deep textarea:focus-visible {
    border: none;
  }
  ::v-deep code {
    white-space: break-spaces;
    margin-bottom: 12px;
  }
  ::v-deep table {
    width: 100%;
    border-collapse: collapse; /* 去掉单元格之间的距离 */
    margin: 12px 0px;
    // table-layout: fixed;
    th,
    td {
      border: 1px solid #ddd; /* 设置单元格边框  #e8e8eb */
      padding: 10px; /* 设置单元格内边距 */
      text-align: left; /* 设置文本对齐方式 */
      border-left: none; /* 去掉左侧边框 */
      border-right: none; /* 去掉右侧边框 */
      border-color: rgb(240, 240, 240);
    }
    thead {
      background: #fafafa;
      color: #1f2733;
      font-weight: 500;
      border-top: none;
    }
  }
  ::v-deep .reference-num-active {
    background-color: #f1f4ff !important;
    color: #356bfd !important;
  }
  ::v-deep .gh {
    color: #8f909a;
    border-radius: 50%;
    cursor: pointer;
    background: #eef0f6;
    font-size: 12px;
    margin: 0 4px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    display: inline-block;
    text-align: center;
    font-family: "iconfont" !important;
    font-family: "iconfont" !important;
    font-style: normal;
    &::before {
      content: "\e853";
    }
    &:hover {
      color: #000;
    }
  }
}
</style>
